//投诉反馈
<template>
  <div class="cell-btn xh-list">
    <group v-for="(item,index) in pageData"
           :key="index"
           class="group-main">
      <cell
        :link="{path:'/demos/my-suggest-detail',query:{MySuggestGUID:item.MySuggestGUID,ReplyState:item.ReplyState}}">
        <div slot="title"
             class="head">{{item.SuggstName}}
        </div>
        <div slot="inline-desc"
             class="div-desc">
          <span class="cell-desc">合作项目:&nbsp;{{item.ProjName}}</span>
          <span class="cell-desc">投诉类型:&nbsp;{{item.SuggestTypeName}}</span>
          <div class="div-date">
            <div class="div-left">{{item.SuggestDate}}</div>
            <div class="div-right">
              <a class="button-init button-red">{{item.ReplyState}}</a>
            </div>
          </div>
        </div>
      </cell>
    </group>
    <div class="placeholder"></div>
    <a class="button bottom-button-red" @click="suggest">
      <icon type="warn"></icon>
      我要投诉</a>
  </div>
</template>

<script>
  import { Search, Group, Cell, dateFormat, XButton, Icon } from 'vux'
  import { SuggestService } from '../../service/Services.js'

  export default {
    name: 'CellBtn',
    components: {
      Search,
      Group,
      Cell,
      XButton,
      Icon
    },
    data () {
      return {
        pageData: []
      }
    },
    methods: {
      loadData () {
        // 如果没有登录直接跳转到投诉界面
        if (!this.$store.getters.getUserInfo) {
          this.$router.push({path: '/demos/my-suggest-form'})
          return
        }
        this.$vux.loading.show({
          text: '加载中...'
        })
        let providerGUID = this.$store.getters.getUserInfo.ProviderGUID
        // let providerGUID = '7DE6EDA4-EDFF-E611-94BB-00155D0A2110'
        SuggestService.getMySuggest(providerGUID).then((res) => {
          this.$vux.loading.hide()
          let data = res.Data
          for (var i = 0; i < data.length; i++) {
            data[i].ReplyState = '待回复'
            if (data[i].State === '已受理' || data[i].State === '受理中') {
              data[i].ReplyState = '已回复'
            }
            data[i].SuggestDate = data[i].SuggestDate ? this.formatDate(data[i].SuggestDate) : ''
          }
          this.pageData = data
        }).catch((res) => {
          this.$vux.toast.show({
            text: '请求失败,请联系管理员',
            type: 'cancel',
            width: '180px'
          })
        })
      },
      formatDate (myDate) {
        var msec = myDate.match(/\d+[+]\d+/gi)
        return dateFormat(new Date(Number.parseInt(msec)), 'YYYY-MM-DD HH:mm')
      },
      suggest () {
        this.$router.push({path: '/demos/my-suggest-form'})
      }
    },
    created () {
      this.loadData()
    }
  }
</script>

<style scoped lang="less">
  .cell-main {
    margin-top: 10px;
  }

  .cell-desc {
    display: block;
    margin: 5px 0px;
    word-break: keep-all;
    /* 不换行 */
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow: ellipsis;
    /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
  }

  .head {
    font-weight: bold;
    font-size: 19px;
    color: #111111;
  }

  .div-date {
    border-top: 0.5px dashed #E4E4E4;
    margin: 15px 0 0 0;
    padding-top: 10px;
  }

  .div-left {
    float: left;
  }

  .div-right {
    float: right;
  }

  .div-desc {
    color: #7F7F7F;
  }

  .date-red {
    color: red;
  }

  .button-red {
    color: red;
    background-color: white;
    border: 1px solid red;
  }

   .bottom-button-red {
    box-shadow: 0px -2px 2px 0px rgba(0, 0, 0, 0.05);
    border-top: 1px solid #e5e3e6;
    position: fixed;
    bottom: 0;
    left: 0;
    color: white;
    background-color: red;
  }

  .button-init {
    background-color: white;
    font-size: 12px;
    height: 23px;
    line-height: 23px;
    padding: 0 12px;
    border-radius: 20px;
    display: inline-block;
  }

  .placeholder {
    height: 50px;
  }

  .button {
    margin-top: 20px;
    font-size: 17px;
    height: 50px;
    line-height: 50px; // padding: 0 12px;
    display: inline-block;
    width: 100%;
    text-align: center;
  }

  .weui-icon-warn {
    color: #fff;
  }
</style>
